gsap.set(".bg", { zIndex: (i, target, targets) => targets.length - i });

const imageChange = gsap.timeline({ paused: true })

imageChange
    .to('.bg.one', { duration: 1.0, autoAlpha: 0 }, 1.0)

;
// .to('.bg.three', { duration: 0.25, autoAlpha: 1 },2.0)

ScrollTrigger.create({
    trigger: '.main-content',
    start: 'top top',
    end: '+=100%',
    pin: '.bg-wrap',
    animation: imageChange,
    scrub: true,
})